<template>
  <div>
    <div class="cate_box">
      <div
        v-if="
          plantType !== 'unlimit' ||
            plantOrnamentalCharacter.length > 0 ||
            plantSettingType.length > 0
        "
        class="cate_item"
        style="margin-top: 0"
      >
        <div class="label_box">您已选择：</div>
        <div class="tag_box">
          <div style="line-height: 24px;">
            <div
              v-if="plantType !== 'unlimit'"
              style="float:left;margin:0 5px 5px 0; border:1px dashed #ccc; color:green;"
            >
              <span style="float:left;font-weight:bold">
                植物类别：
              </span>
              <span style="float:left;">
                <dict-tag :options="dict.type.plant_type" :value="plantType" />
              </span>
            </div>
            <div
              v-if="plantOrnamentalCharacter.length > 0"
              style="float:left;margin:0 5px 5px 0; border:1px dashed #ccc; color:red;"
            >
              <span style="float:left;font-weight:bold">
                观赏特性：
              </span>
              <span style="float:left;">
                <dict-tag
                  :options="dict.type.plant_ornamental_character"
                  :value="plantOrnamentalCharacter"
                />
              </span>
            </div>
            <div
              v-if="plantSettingType.length > 0"
              style="float:left;margin:0 5px 0 0; border:1px dashed #ccc; color:orange;"
            >
              <span style="float:left;font-weight:bold">
                配置方式：
              </span>
              <span style="float:left;">
                <span style="float:left;color:orange">
                  <dict-tag
                    :options="dict.type.plant_setting_type"
                    :value="plantSettingType"
                  />
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="cate_item" style="margin-top: 0">
        <div class="label_box">植物类别：</div>
        <div class="tag_box">
          <el-radio-group v-model="plantType">
            <el-radio label="unlimit">不限</el-radio>
            <el-radio
              v-for="item in searchTypeList"
              :key="item.id"
              :label="item.dictValue"
              >{{ item.dictLabel }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
      <div class="cate_item">
        <div class="label_box">观赏特征：</div>
        <div class="tag_box">
          <el-row type="flex" :gutter="10">
            <el-col :span="2.5">
              <el-checkbox v-model="checkAllView" @change="handleChangeView"
                >不限</el-checkbox
              >
            </el-col>
            <el-col :span="21">
              <el-checkbox-group
                :disabled="checkAllView"
                v-model="plantOrnamentalCharacter"
              >
                <el-checkbox
                  v-for="dict in dict.type.plant_ornamental_character"
                  :label="dict.value"
                  :key="dict.value"
                  >{{ dict.label }}</el-checkbox
                >
              </el-checkbox-group></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="cate_item">
        <div class="label_box">配置方式：</div>
        <div class="tag_box">
          <el-row type="flex" :gutter="10">
            <el-col :span="2.5">
              <el-checkbox
                v-model="checkAllSetting"
                @change="handleChangeSetting"
                >不限</el-checkbox
              >
            </el-col>
            <el-col :span="21">
              <el-checkbox-group
                :disabled="checkAllSetting"
                v-model="plantSettingType"
              >
                <el-checkbox
                  v-for="dict in dict.type.plant_setting_type"
                  :key="dict.value"
                  :label="dict.value"
                >
                  {{ dict.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="cate_item" style="align-items: center">
        <div class="label" style="white-space: nowrap">植物名称：</div>
        <el-input
          style="margin-right: 15px"
          v-model="scientificName"
          placeholder="请输入植物名称"
          size="small"
          clearable
        />
        <div class="btn_search">
          <el-button-group>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { treeList } from "@/api/system/dict/data.js";

export default {
  name: "TopSearch",
  dicts: ["plant_type", "plant_setting_type", "plant_ornamental_character"],

  data() {
    return {
      checkAllView: true,
      checkAllSetting: true,
      plantType: "unlimit",
      plantOrnamentalCharacter: [],
      plantSettingType: [],
      scientificName: "",
      searchTypeList: [],
      searchTypeLabel: ""
    };
  },
  created() {
    this.getTypeList();
  },
  methods: {
    //handlePlantTypeChange(val, item) {},
    async getTypeList() {
      let targetList = [];
      const res = await treeList({ dictType: "plant_type" });
      res.data.forEach(item => {
        if (item.children && item.children.length > 0) {
          item.children.map(ele => {
            ele.dictLabel = ele.dictLabel.split("/").pop();
          });
          targetList = targetList.concat(item.children);
        } else {
          targetList.push(item);
        }
      });
      this.searchTypeList = targetList;
    },
    handleChangeView() {
      if (this.checkAllView) {
        this.plantOrnamentalCharacter = [];
      }
    },
    handleChangeSetting() {
      if (this.checkAllSetting) {
        this.plantSettingType = [];
      }
    },
    handleSearch() {
      const params = {
        plantType: this.plantType === "unlimit" ? "" : this.plantType,
        scientificName: this.scientificName,
        plantSettingType: this.plantSettingType.toString(),
        plantOrnamentalCharacter: this.plantOrnamentalCharacter.toString()
      };
      this.$emit("search", params);
    }
  }
};
</script>

<style lang="scss" scoped>
.btn_search {
  width: 150px;
}
.cate_box {
  padding: 20px 20px 8px;
  background: #fff;
  border-radius: 10px;
  .cate_item {
    display: flex;
    // align-items: center;
    margin: 16px 0;
  }
  .label_box {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 16px;
  }
  .tag_box {
    flex: 1;
    font-size: 14px;
    font-weight: 400;

    ::v-deep .el-radio__input {
      display: none;
    }
    ::v-deep .el-radio__input.is-checked + .el-radio__label {
      color: #837eee;
      background: #eaf2fd;
      padding: 5px;
      border-radius: 6px;
    }
    ::v-deep .el-radio {
      font-size: 16px;
      color: #666;
      margin: 10px 10px 10px 0;
    }
    ::v-deep .el-checkbox {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
      color: #666666;
    }
  }
}
</style>
